////////////////////////////////////////
// Widget Common Mixins
@mixin boxShadow($arguments) {
  box-shadow: #{$arguments};
}

@mixin defaultBoxShadow() {
  @include boxShadow("0 1px 2px rgba(0, 0, 0, 0.3)");
}

@mixin pointerStyle($width, $height) {
  content: "";
  position: absolute;
  width: $width + px;
  height: $height + px;
}

@mixin outlineStyle() {
  outline: 2px solid $focus_outline_color;
  outline-offset: 2px;
  z-index: 1;
}

@function sqrt($r) {
  $x0: 1;
  $x1: $x0;
  @for $i from 1 through 10 {
    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
    $x0: $x1;
  }
  @return $x1;
}

@mixin contentMaxHeightDockedSide($contentHeight) {
  $pageMenuHeight: $contentHeight - 60;
  .esri-popup--is-docked {
    &-top-left,
    &-top-right,
    &-bottom-left,
    &-bottom-right {
      .esri-popup__content {
        max-height: #{$contentHeight}px;
      }
    }
  }
}

@mixin mediaImgMaxWidth($max_width) {
  .esri-feature {
    .esri-feature__media-item {
      img {
        max-width: #{$max_width}px;
      }
    }
    .esri-feature--media-pagination-visible {
      .esri-feature__media-item {
        img {
          max-width: #{($max_width - 60)}px;
        }
      }
    }
  }
}

@mixin popupWidth_BasedOnViewSize($width) {
  .esri-popup__main-container {
    width: #{$width}px;
  }
}

@mixin popupHeight_BasedOnViewSize($height) {
  $pageMenuHeight: $height - 100;
  .esri-popup__main-container {
    max-height: #{$height}px;
  }
  &.esri-popup--feature-menu-open {
    .esri-popup__feature-menu-viewport {
      max-height: #{$pageMenuHeight}px;
    }
  }
}

@mixin _loopingProgressBar($width) {
  @keyframes looping-progresss-bar-ani {
    #{0%} {
      left: 0%;
      width: 0%;
    }
    #{$width} {
      left: 0%;
      width: $width;
    }
    #{100-$width} {
      left: 100% - $width;
      width: $width;
    }
    #{100%} {
      left: 100%;
      width: 0%;
    }
  }
}
